<template>
  <div class="">
    <myHeader v-model:show="show"></myHeader>
    <myInput></myInput>
      <list></list>
    <transition name="slide">
      <popup v-if="show"></popup>
    </transition>
  </div>
</template>

<script>
import myHeader from "../components/myHeader.vue";
import myInput from "../components/myInput.vue";
import list from "../components/list.vue";
import popup from "../components/popup";
import { ref } from "vue";
export default {
  setup(props) {
    let show = ref(false);
    return {
      show,
    };
  },
  components: { myHeader, myInput, list, popup },
};
</script>

<style lang="scss" scoped>
.slide-enter-from,
.slide-leave-to {
  left: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s linear;
}

</style>
